<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<view class='slogan'>知识社区</view>
				<input class="uni-input search-area" focus placeholder="搜索你想了解的问题或用户..." v-model="keyWord" @confirm="search"/>
			</view>
			<view class='nav'>
				<u-sticky bgColor="#fff">
					<u-tabs :list="cateList" @click="click"></u-tabs>
				</u-sticky>
			</view>
		</view>

		<view v-if="postList.length" class="list">
			<scroll-view style="height: 25rem;" :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh"
				@scrolltolower="lower">
				<view class="item" v-for="item in postList" :key="item.id">
					<view class="business" @click="goCenter(item.busid)">
						<view class="avatar">
							<image mode="aspectFit" :src="item.business?item.business.avatar_text:''"></image>
						</view>
						<view class="author">{{item.business?item.business.nickname:"默认用户"}}</view>
					</view>

					<view class="info">
						<navigator :url="`/pages/post/info?concernid=${item.busid}&postid=${item.id}`" class="title">{{ item.title }}
							<view class="createtime">发布时间：{{item.createtime.split(" ")[0]}}</view>
							<view class="category">分类：{{item.cate_text}}</view>

							<view class="join">
								<view class="status">{{item.status_text}}</view>
								<view class="point">￥{{item.point}}</view>
								<view class="count">{{item.comment_num?item.comment_num+'条回复':"暂无评论"}}</view>
							</view>
						</navigator>
					</view>
				</view>
				<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
			</scroll-view>

		</view>
		<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		
		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
export default {
	onReady() {
		this.getCate()
		this.onRefresh()
	},
	data() {
		return {
			scrollTop: 0,
			triggered: false,
			postList: [
				
			],
			cateList: [
				{
					name: '全部',
					id: ""
				},
			],
			page: 1,
			limit: 10,
			cateid: 0,
			keyWord: ""
		}
	},
	methods: {
		click(item) {
			this.cateid = item.id
			this.postList = []
			this.page = 1
			this.lower()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			this.triggered = true
			this.page = 1;
			this.postList = []
			this.lower()
		},
		async lower(e) {
			// 发送请求
			let data = {
				cateid: this.cateid,
				page: this.page,
				limit: this.limit,
				keyWord: this.keyWord
			}
			let result = await uni.$u.http.post("/index/index", data)
			if (result.code == 0) {
			} else {
				this.page++
				this.postList.push(...result.data)
				this.triggered = false;
				this._freshing = false;
			}
		},
		// 获取分类列表
		async getCate() {
			let result = await uni.$u.http.post("/index/cate");
			if (result.code) {
				this.cateList.push(...result.data)
			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg
				})
			}
		},
		search(){
			this.onRefresh()
		},
		goCenter(busid){
			uni.$u.route({
				url:"/pages/business/center",
				params:{busid}
			})
		}
	}
}
</script>


<style>
.content {
	width: 100%;
	overflow-x: hidden;
}

.search {
	height: 238rpx;
	background-image: url("/static/titlebg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	padding: 0 28rpx;
}

.slogan {
	font-size: 50rpx;
	color: #fff;
	padding-top: 20rpx;
	padding-bottom: 30rpx;
}

.search-area {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	background-image: url("/static/search.png");
	background-repeat: no-repeat;
	background-size: 30rpx 30rpx;
	background-position: 35rpx 30rpx;
	border-radius: 11rpx;
	line-height: 88rpx;
	text-indent: 78rpx;
	color: #2f2e2e;
	font-size: 30rpx;
}

.nav {
	display: flex;
	background-color: #f1f6f9;
	position: relative;
}

.nav .nav-item {
	width: 25%;
	height: 110rpx;
	line-height: 110rpx;
	text-align: center;
	color: #666;
	font-size: 30rpx;
}

.nav .active {
	color: #000;
	font-weight: 600;
}

.nav .active-line {
	background-color: #038fff;
	width: 35rpx;
	height: 4rpx;
	position: absolute;
	top: 86rpx;
	transition: left 0.2s;
}

.info .title {
	font-size: 1.1em;
	width: 95%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000;
	font-weight: bold;
}


.list .item {
	display: flex;
	width: 100%;
	padding: 10px;
	margin: 0 auto;
	border-bottom: 1px solid #e9e6e6;
}

.business {
	width: 20%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	margin-right: 10px;
}

.avatar {
	width: 100%;
	height: 5em;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.author {
	text-align: center;
	font-size: .8em;
	color: #999;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.info {
	font-size: .9em;
	color: #999;
}

.info .title,
.info .createtime,
.info .category,
.info .status,
.info .join {
	margin-bottom: 2px;
}


.info .status {
	background: #fff8e5;
	color: #fa3534;
	padding: 1px 2px;
	border: 1px solid #fa3534;
	border-radius: 3px;
	margin-right: 5px;
}

.info .join {
	display: flex;
	align-items: center;
	align-content: center;
	color: #fa3534;
}

.count {
	margin-right: 10px;
}

.info .point {
	width: 4em;
	text-align: center;
	background: #fff8e5;
	color: #f19049;
	padding: 2px;
	margin-right: 10px;
}

.info .createtime{
	font-weight: normal;
}

</style>
